<template>
  <div class="goods">
        <div :class="{actives:item.choose}" @click="choose(item.id,item.choose)"></div>
        <div class="goods_img"><img :src="item.url" alt=""></div>
        <div class="goods_p">
                <p>{{item.title}}</p>
            <span>售价：{{item.price}}元</span>
            <div>
                <button @click="setCartItem(item.id,item.price,'PLUS')">+</button>
                <span>  {{item.totalMount}}  </span>
                <button @click="setCartItem(item.id,item.price,'MINUS')">-</button>
            </div>
        </div>
        <div class="goods_del" @click="del(item.id)"></div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
 name:'Cartitem',
 props:['item'],
 methods: {
     choose(id,choose){
        //  console.log(id,choose);
        this.$store.dispatch('choose',{
            id,
            choose
        })
     },
     setCartItem (id,price,type){
         this.$store.dispatch('setCart',{
             id,
             type,
             price
         });
     },
     del(id){
         this.$store.dispatch('del',{id});
         localStorage.setItem('totalMount',this.totalMount)
        localStorage.setItem('totalPrice',this.totalPrice)
        localStorage.setItem('cartData',JSON.stringify(this.cartData))
     }
 },
 computed:{
      ...mapState(['totalMount','totalPrice','cartData'])
  },
  updated() {
      localStorage.setItem('totalMount',this.totalMount)
      localStorage.setItem('totalPrice',this.totalPrice)
      localStorage.setItem('cartData',JSON.stringify(this.cartData))
  },
}
</script>
    
<style scoped>
    .goods div:nth-child(1) {
        width: 1.21rem;
        height: 100%;
    }
    .actives{
        background: url(../../assets/images/check_press.png) 50% 50% no-repeat;
        background-size: .8rem .8rem;
    }
    .goods .goods_del {
        width: 1.5rem;
        height: 60%;
        background: url(../../assets/images/del.png) 50% 50% no-repeat;
        background-size: 1.3rem 1.3rem;
        margin-top: 1.6rem;
    }
    .goods {
        display: flex;
        width: 100%;
        height: 4.76rem;
        padding: .48rem 0;
        background-color: #fff;
        border-bottom: .4rem solid #eee;
        
    }
    .goods .goods_img {
        width: 3.68rem;
        height: 3.68rem;
        border: 1px solid #ccc;
        margin-right: .35rem;
    }
    .goods img {
        width: 3.6rem;
        height: 3.6rem;
    }
    .goods .goods_p{
        flex: 1;
    }
    .goods .goods_p p {
        width: 8rem;
        overflow: hidden;
        font-size: .58rem;
        color: #666;
    }
    .goods_p>span {
        display: inline-block;
        padding: .25rem 0;
    }
    .goods .goods_p span {
        font-size: .5rem;
        color: #999;
        
    }
    .goods .goods_p div {
        display: flex;
        width: 3.84rem;
        height: 1.32rem;
        border: .04rem solid #ccc;
    }
    .goods .goods_p div span {
        flex: 1;
        height: 1.25rem;
        text-align: center;
        background-color: #fff;
        line-height: 1.32rem;
    }
    .goods .goods_p div button{
        width: 1.25rem;
        height: 1.25rem;
        font-size: .72rem;
        background-color: #f6f6f6;
        border: none;
    }
</style>